<template>
  <div class="wt-date-time">
    <div class="wt">
      <div class="ico"><img :src="wtInfo.icoImg"></div>
      <div class="wd">{{wtInfo.weather}}</div>
    </div>
    <div class="date">
      <div class="big">{{wtInfo.month}}月{{wtInfo.day}}日</div>
      <div class="other">{{wtInfo.year}}年 {{wtInfo.currentWeek}}</div>
    </div>
    <div class="time">{{hour}}:{{minute}}</div>
  </div>
</template>

<script>
  import TimeUpdate from '../corejs/time/time-update'
  import dateParse from './base/date-parse'
  import getWeatherInfo from './base/index'
  import getWtImg from './base/get-wt-img'

  let wtUpdate = new TimeUpdate()
  let timeUpdate = new TimeUpdate()

  function numfill (number) {
    if (number < 10) {
      return '0' + number
    }
    return number
  }

  export default {
    name: 'weather1',
    props: ['cityName'],
    data () {
      return {
        // cityName: '深圳',
        wtInfo: {},
        rank: {},
        hour: '00',
        minute: '00'
      }
    },
    created () {
      wtUpdate.start(this.update, 1000 * 60 * 60 * 2)
      timeUpdate.start(() => {
        let d = new Date()
        this.hour = numfill(d.getHours())
        this.minute = numfill(d.getMinutes())
      }, 1000 * 60)
    },
    destroyed () {
      wtUpdate.stop()
      timeUpdate.stop()
    },
    watch: {
      cityName () {
        this.update()
      }
    },
    methods: {
      update () {
        let {cityName} = this
        if (cityName) {
          let {year, month, day, weekZh} = dateParse(new Date())

          getWeatherInfo(cityName, d => {
            let {air, observe} = d
            observe.icoImg = getWtImg(observe).icoImg
            observe.year = year
            observe.month = month
            observe.day = day
            // observe.currentDate = [year, month, day].join('/')
            observe.currentWeek = '星期' + weekZh
            this.wtInfo = observe
            this.rank = air
          })
        }
      }
    }
  }
</script>

<style scoped>
  .wt-date-time { color: #fff; }
  .wt-date-time[v-cloak] { position: relative; height: 100%; overflow: hidden; }
  .wt-date-time[v-cloak]:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #21acce; }
  .wt-date-time .wt { float: left; }
  .wt-date-time .wt .ico { width: 96px; height: 98px; text-align: center; display: table-cell; vertical-align: middle; }
  .wt-date-time .wt .ico img{ width: 96px; }
  .wt-date-time .wt .wd { text-align: center; margin-top: -10px; }
  .wt-date-time .date { float: left; }
  .wt-date-time .date .big { font-size: 48px; padding: 12px 0 6px; }
  .wt-date-time .date .other { font-size: 32px; }
  .wt-date-time .time { float: right; font-size: 72px; line-height: 1.7; padding: 0 24px; }
</style>
